/* header 登录转换 */
let uidn = localStorage.getItem('uid');
if (uidn != null) {
    let username = localStorage.getItem('username');
    $('#login').html(username).click(function(){
        var userRes = confirm('是否要退出登录');
        if(userRes == true){
            localStorage.removeItem('uid');
            localStorage.removeItem('username');
            location.href = './list.html';
        }
    })
}else{
    $('#login').html('登录').click(function(){
        location.href = './login.html'
    })
}

/* nav下拉跳转 */
$("#nav div ul").on('click', 'li', function () {
    localStorage.setItem('pclass', $(this).attr('pclass'));
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = './infor.html';
})

/* 商品加载 */
var pg = 1;//页码
var flag = idUp;
let pclass = localStorage.getItem('pclass');
url = `http://localhost:3000/${pclass}`;
ajax(url);
function ajax(url) {
    axios.get(url)
        .then(function (res) {
            html = '';
            cartsNum = res.data.length;
            pageNum = 8;
            liNum = Math.ceil(cartsNum / pageNum);
            restNum = cartsNum % pageNum;
            for (let i = 1; i <= liNum; i++) {
                $(`<button class="pg">${i}</button>`).insertBefore($('#main ol #end'))
            }
            idDown()
            btnCorlor()
            /* .pg 页码分页 */
            $('ol').on('click', '.pg', function () {
                console.log(this)
                pg = $(this).html();
                switch (flag) {
                    case idUp:
                        idUp();
                        break;
                    case idDown:
                        idDown();
                        break;
                    case priceUp:
                        priceUp();
                        break;
                    case priceDown:
                        priceDown();
                        break;
                }
                btnCorlor();
            })
            /* 上一页 */
            $('ol').on('click', '#start', function () {
                if (pg <= 1) {
                    pg = 1;
                } else {
                    pg--;
                    switch (flag) {
                        case idUp:
                            idUp();
                            break;
                        case idDown:
                            idDown();
                            break;
                        case priceUp:
                            priceUp();
                            break;
                        case priceDown:
                            priceDown();
                            break;
                    }
                }
                btnCorlor();
            })
            /* 下一页 */
            $('ol').on('click', '#end', function () {
                if (pg >= liNum) {
                    pg = liNum;
                } else {
                    pg++;
                    switch (flag) {
                        case idUp:
                            idUp();
                            break;
                        case idDown:
                            idDown();
                            break;
                        case priceUp:
                            priceUp();
                            break;
                        case priceDown:
                            priceDown();
                            break;
                    }
                    btnCorlor();
                }
            })


            /* sort */
            $('#main .box1 .glyphicon-chevron-up').click(function () {
                idUp();
                flag = idUp;
            })
            $('#main .box1 .glyphicon-chevron-down').click(function () {
                idDown();
                flag = idDown;
            })
            $('#main .box2 .glyphicon-chevron-up').click(function () {
                priceUp();
                flag = priceUp;
            })
            $('#main .box2 .glyphicon-chevron-down').click(function () {
                priceDown();
                flag = priceUp;
            })
            /* sort */

        })
        .catch(function (err) {
            console.log(err)
        })
}

/* 分页按钮颜色变化 */
function pgColor() {
    $('ol .pg').each(function (v) {
        $('ol .pg').eq(v).css('color', '#333')
    })
    $('ol .pg').eq(pg - 1).css('color', 'red')
}

/* 上下页按钮颜色 */
function btnCorlor(){
    if (pg <= 1) {
        $('ol #start').css({'disabled':'disabled','color':'#ccc'})
    } else {
        $('ol #start').css({'disabled':'disabled','color':'#333'})
    }
    if (pg >= liNum) {
        $('ol #end').css({'disabled':'disabled','color':'#ccc'})
    } else {
        $('ol #end').css({'disabled':'disabled','color':'#333'})
    }
}
/* 分页加载 */
/* 排序 */
/* id up*/
function idUp() {
    let urlPage = `http://localhost:3000/${pclass}`
    html = '';
    axios.get(urlPage)
        .then(function (res) {
            var arr = res.data;
            arr.sort(function (a, b) {
                return b.id - a.id;
            })
            let len = pageNum;
            if (pg == liNum) {
                len = ((pg - 1) * pageNum) + restNum;
            }else{
                len = pg * pageNum;
            }
            for (let i = (pg - 1) * pageNum; i < len; i++) {
                html += `<li pid="${arr[i].id}" pclass="${arr[i].pclass}">
                <img src="${arr[i].img[0]}" alt="">
                <h2>${arr[i].title}</h2>
                <p>${arr[i].intro}</p>
                <span>${arr[i].price}</span>
            </li>`;
            }
            $('#main ul ul').html(html);
            pgColor();
        })
}
function idDown() {
    let urlPage = `http://localhost:3000/${pclass}`
    html = '';
    axios.get(urlPage)
        .then(function (res) {
            var arr = res.data;
            arr.sort(function (a, b) {
                return a.id - b.id;
            })
            let len = pageNum;
            if (pg == liNum) {
                len = ((pg - 1) * pageNum) + restNum;
            }else{
                len = pg * pageNum;
            }
            for (let i = (pg - 1) * pageNum; i < len; i++) {
                html += `<li pid="${arr[i].id}" pclass="${arr[i].pclass}">
                <img src="${arr[i].img[0]}" alt="">
                <h2>${arr[i].title}</h2>
                <p>${arr[i].intro}</p>
                <span>${arr[i].price}</span>
            </li>`;
            }
            $('#main ul ul').html(html);
            pgColor();
        })
}

/* price */
function priceUp() {
    let urlPage = `http://localhost:3000/${pclass}`
    html = '';
    axios.get(urlPage)
        .then(function (res) {
            var arr = res.data;
            arr.sort(function (a, b) {
                var arr1 = a.price.split('');
                var arr2 = b.price.split('');
                arr1.splice(0, 1);
                arr2.splice(0, 1);
                return arr1.join('') - arr2.join('');
            })
            let len = pageNum;
            if (pg == liNum) {
                len = ((pg - 1) * pageNum) + restNum;
            }else{
                len = pg * pageNum;
            }
            for (let i = (pg - 1) * pageNum; i < len; i++) {
                html += `<li pid="${arr[i].id}" pclass="${arr[i].pclass}">
                <img src="${arr[i].img[0]}" alt="">
                <h2>${arr[i].title}</h2>
                <p>${arr[i].intro}</p>
                <span>${arr[i].price}</span>
            </li>`;
            }
            $('#main ul ul').html(html);
            pgColor();
        })
}

function priceDown() {
    let urlPage = `http://localhost:3000/${pclass}/`
    html = '';
    axios.get(urlPage)
        .then(function (res) {
            var arr = res.data;
            arr.sort(function (a, b) {
                var arr1 = a.price.split('');
                var arr2 = b.price.split('');
                arr1.splice(0, 1);
                arr2.splice(0, 1);
                return arr2.join('') - arr1.join('');
            })
            let len = pageNum;
            if (pg == liNum) {
                len = ((pg - 1) * pageNum) + restNum;
            }else{
                len = pg * pageNum;
            }
            for (let i = (pg - 1) * pageNum; i < len; i++) {
                html += `<li pid="${arr[i].id}" pclass="${arr[i].pclass}">
                <img src="${arr[i].img[0]}" alt="">
                <h2>${arr[i].title}</h2>
                <p>${arr[i].intro}</p>
                <span>${arr[i].price}</span>
            </li>`;
            }
            $('#main ul ul').html(html);
            pgColor();
        })
}

/* 商品点击，进入详情页 */
$("#main ul").on('click', 'li', function () {
    localStorage.setItem('pid', $(this).attr('pid'));
    location.href = '../pages/infor.html';
})